<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MdiWin Demo - edit</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>
</head>

<body>
    <h1>DataGrid</h1>
    <table id="dg" style="width:100%;height: 500px;"></table>
    <p></p>
    <form>
        <table style="width: 100%;">
            <tr>
                <td width="380px">
                    <div class="easyui-panel" title="editMode" style="width:100%;max-width:370px;padding: 5px;">
                        <div id="div_editMode"></div>
                    </div>
                </td>
                <td>
                    <div class="easyui-panel" title="editType" style="width:100%;max-width:370px;padding: 5px;">
                        <div id="div_editType"></div>
                    </div>
                </td>
            </tr>
        </table>
    </form>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:getRows()">getRows</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset()">reset</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:destroy()">destroy</a>

    <script>

        $(function () {
            $("#div_editMode").radiogroup({
                name: 'radio1',
                labelWidth: 340,
                data: [{
                    value: '1',
                    label: '自由编辑1（包含save按钮）,在当前行中编辑',
                }, {
                    value: '2',
                    label: '自由编辑2（包含save按钮），弹出编辑模态窗体'
                }, {
                    value: '3',
                    label: '编辑（不包含save按钮），弹出编辑模态窗体'
                }],
                value: 3,
                dir: 'v'
            });

            $("#div_editType").radiogroup({
                name: 'radio2',
                labelWidth: 340,
                data: [{
                    value: '1',
                    label: '属性编辑模式 editMode=2,3使用',
                }, {
                    value: '2',
                    label: 'form编辑模式 editMode=2,3使用'
                }],
                value: 1,
                dir: 'v'
            });


            $("#dg").yqDataGrid({
                frozenNum: 2,

                editMode: 3,    //1-自由编辑1（包含save按钮）,在当前行中编辑；
                //2-自由编辑2（包含save按钮），弹出编辑模态窗体
                //3-编辑（不包含save按钮），弹出编辑模态窗体
                editType: 1,    //editMode=2,3时  1:属性编辑模式  2:form编辑模式
                editModeW: 650, //模态编辑器宽度 格式为 800（数字）
                editModeH: 450, //模态编辑器高度 格式为 600（数字）
                editModeNo: 1, //编辑模板

                moveModeW: 650, //模态编辑器宽度 格式为 800（数字）
                moveModeH: 450, //模态编辑器高度 格式为 600（数字）
                moveModeNo: 1,  //移动模板

                loadDefault: false,   //加载默认值
                blankTag: "*",        //值不能为空，标题附加标记

                loadData: true,
                isPage: true,

                isEdit: true, //可编辑
                copy: true,
                add: true,
                upp: true,
                del: true,
                isdel: true, //可注销
                isdelEdit: true, //注销是否可编辑
                move: false, //可移动

                linkField: ["textbox"],

                sumList: ["numberbox", "numberspinner"],

                beforeBindingTitle: function (columns, callback) {
                    console.log("beforeBindingTitle", columns);
                    callback(columns);
                }, //标题绑定前
                afterBindingTitle: function () {
                    console.log("afterBindingTitle");
                }, //标题绑定后
            });
        });

        function getRows() {
            var rows = $("#dg").yqDataGrid("getRows");
            console.log("rows", rows);
        }

        function reset() {
            $("#dg").yqDataGrid({
                //frozenNum: 2,
                editMode: $("#div_editMode").radiogroup("getValue"),
                editType: $("#div_editType").radiogroup("getValue")
            });
        }

        function destroy() {
            $("#dg").yqDataGrid("destroy");
        }
    </script>
</body>

</html>